<template>
    <div
        class="artifact"
        :class="{ selectable }"
        @click="handleClick"
    >
        <div class="up">
            <span class="name">
                {{ displayedTitle }}
                <span style="color: #e7bf4f">
                    <i class="el-icon-star-on"></i>{{ displayedStar }}
                </span>
            </span>
            <span class="extra fs-12" v-if="this.extra">{{ extra }}</span>
        </div>
        <div class="down">
            <div>
                <img :src="imageSrc" class="myimage">
            </div>
            <div class="detail-div">
                <p class="main-tag">{{ mainDisplayTag }}</p>
                <p
                    v-for="(tag, index) in secTags"
                    :key="index"
                    class="sec-tag"
                >
                    {{ tag }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import { displayedTag } from "@util/utils";
import { artifactsData } from "@asset/artifacts";

export default {
    name: "ArtifactDisplay",
    props: {
        item: {
            type: Object,
            default: () => ({
                setName: "luckyDog",
                position: "cup",
                detailName: "worm666",
                mainTag: {
                    name: "attackPercentage",
                    value: 0.1,
                },
                normalTags: [
                    { name: "defendStatic", value: 20, },
                    { name: "attackPercentage", value: 0.3 },
                    { name: "attackPercentage", value: 0.3 },
                    { name: "attackPercentage", value: 0.3 },
                ],
                omit: false,
            })
        },

        selectable: {
            type: Boolean,
            default: false,
        },

        extra: {
            type: String,
            default: "",
        }
    },
    methods: {
        handleClick() {
            if (this.selectable) {
                this.$emit("click");
            }
        }
    },
    computed: {
        displayedTitle() {
            let item = artifactsData[this.item.setName];
            if (!item) {
                throw "no artifact";
            }

            let title = "not exist"
            if (item[this.item.position]) {
                title = item[this.item.position].chs;
                if (Object.prototype.hasOwnProperty.call(this.item, "level")) {
                    title += "+" + (this.item.level);
                } else {
                    title += "+??";
                }
            }
            

            return title;
        },

        displayedStar() {
            return this.item.star || "??";
        },

        imageSrc() {
            let item = artifactsData[this.item.setName];
            if (!item) {
                throw "no artifact";
            }

            if (item[this.item.position]) {
                return item[this.item.position].url;
            }

            throw "error no position";
        },

        mainDisplayTag() {
            return displayedTag(this.item.mainTag.name, this.item.mainTag.value);
        },

        secTags() {
            let temp = [];
            for (let tag of this.item.normalTags) {
                temp.push(displayedTag(tag.name, tag.value));
            }
            return temp;
        }
    }
}
</script>

<style scoped>
.extra {
    color: #e7bf4f;
    line-height: 32px;
    margin-left: 32px;
}

.sec-tag {
    font-size: 12px;
    margin: 0;
    padding: 0;
    color: #999999;
}

.main-tag {
    font-size: 12px;
    padding: 0;
    margin: 0;
    font-weight: bold;
}

.artifact {
    /* border: 1px solid #cccccc; */
    box-shadow: 0 0 10px 1px #00000011;
    transition: 300ms;
    display: inline-block;
}

.up {
    height: 32px;
    padding: 0 8px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
}

.down {
    padding: 8px;
    display: flex;
    align-items: top;
}

.name {
    color: #123456;
    font-size: 12px;
    float: left;
    height: 32px;
    line-height: 32px;
}

.myimage {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    display: block;
    margin-right: 8px;
}

.selectable:hover {
    background: #12345622;
    /* border: 1px solid #123456; */
    cursor: pointer;
}
</style>